<template>
  <div class="search-container">
    <div class="button" @click="handleClick">+</div>
    <div class="input">
        <input v-model="input" @input="changeInput" type="text" placeholder="请输入关键字...">
    </div>
  </div>
</template>

<script setup>
import {inject, ref, watch} from "vue"
import _ from 'lodash'
const {setIsShow} = inject('isShow')
const {setInput,inputs} = inject('searchBar')
const input = ref('')
const handleClick = () => {
    setIsShow(true)
}


const changeInput = _.debounce(()=>{
  setInput(input.value)
},500)

defineExpose({
  handleClick
})

</script>

<style lang="stylus">
div.search-container
    height 60px
    background #d3d3d3
    display flex
    align-items center
    justify-content center
    .button
        width 40px
        height 40px
        background-color #1e90ff
        padding-left 0
        border-radius 5px
        font-size 30px
        font-weight bold
        color #fff
        text-align center
        cursor pointer
    .input
        flex 1
        height 36px
        padding 0 10px
        input
            height 100%
            width 100%
            border solid 1px #ccc
            border-radius 5px
            
</style>